<template>
  <div class="goods-comment">
    <div class="head">
      <div class="data">
        <p>
          <span>{{ commentInfo.salesCount }}</span
          ><span>人购买</span>
        </p>
        <p>
          <span>{{ commentInfo.praisePercent }}</span
          ><span>好评率</span>
        </p>
      </div>
      <div class="tags">
        <div class="dt">大家都在说：</div>
        <div class="dd">
          <a
            @click="aClick(i)"
            href="javascript:;"
            :class="{ active: currTitle === i.title }"
            v-for="i in commentInfo.tags"
            :key="i.title"
            >{{ i.title }}（{{ i.tagCount }}）</a
          >
        </div>
      </div>
    </div>
    <div class="sort">
      <span>排序：</span>
      <a
        href="javascript:;"
        :class="{ active: params.sortField === null }"
        @click="sortClick(null)"
        >默认</a
      >
      <a
        href="javascript:;"
        :class="{ active: params.sortField === 'createTime' }"
        @click="sortClick('createTime')"
        >最新</a
      >
      <a
        href="javascript:;"
        :class="{ active: params.sortField === 'praiseCount' }"
        @click="sortClick('praiseCount')"
        >最热</a
      >
    </div>
     <div class="list">
       <!-- 
         评论列表
         1：html结构
         2：定义api调用接口
         3：拿到数据渲染
         4：筛选点击与接口形成关联
         5：图片组件处理
        -->
        <!-- 列表 -->
      <div class="item" v-for="item in list" :key="item.id">
        <div class="user">
          <img :src="item.member.avatar" alt="">
          <span>{{item.member.nickname}}</span>
        </div>
        <div class="body">
          <div class="score">
            <i class="iconfont icon-wjx01"
              v-for="i in item.score"
              :key="'a'+i"
            ></i>
            <i class="iconfont icon-wjx02"
            v-for="i in 5-item.score"
            :key="'b'+i"></i>
            <span class="attr">{{item.orderInfo.specs}}</span>
          </div>
          <div class="text">{{item.content}}</div>
          <!-- 图片展示区域 -->
          <GoodsCommentImage :pictures="item.pictures"></GoodsCommentImage>
          <div class="time">
            <span>{{item.createTime}}</span>
            <span class="zan"><i class="iconfont icon-dianzan"></i>{{item.praiseCount}}</span>
          </div>
        </div>
      </div>
      <XtxPagination
      :page="params.page"
      :pageSize="params.pageSize"
      :total="counts"
      @change="pageChange"
      ></XtxPagination>
    </div>
  </div>
</template>
<script>
import { goodsEvaluate, goodsEvaluatePage} from '@/api/product'
import { useRoute } from 'vue-router'
import { ref, reactive } from 'vue'
//导入图片组件
import GoodsCommentImage from './goods-comment-image.vue'
import { get } from '@vueuse/shared'

function getOtherInfo () {
  // 获取商品评价条件
  const route = useRoute()
  const commentInfo = ref('')

  goodsEvaluate(route.params.id).then(res => {
    res.result.tags = [
      { title: '全部评价', tagCount: res.result.evaluateCount },
      { title: '有图', tagCount: res.result.hasPictureCount },
      ...res.result.tags
    ]
    commentInfo.value = res.result
    console.log('评价条件信息', res)
  })
  return commentInfo
}

export default {
  name: 'GoodsComment',
  components:{
GoodsCommentImage
  },
  setup () {
    const route=useRoute();
    //总评论条数
    const counts=ref(100)
    // 获取商品评价条件
    const commentInfo = getOtherInfo()
    // 请求评价列表参数值
    const params = reactive({
      page: 1, //	是	1	页码
      pageSize: 10, //	是	10	页尺寸
      hasPicture: false, //	否	true	是否有图
      tag: null, //	否	质量好	标签
      sortField: null, //	否	praiseCount	排序字段，可选值范围[praiseCount,createTime]
      sortMethod: '' //	否	desc	排序方法，可选值范围[asc,desc],默认为desc
    })
    // tag点击事件
    const currTitle = ref('全部评价')
    function aClick (i) {
      // 当前tag无效点击
      if(currTitle.value===i.title)return
      currTitle.value = i.title
      if (i.title === '全部评价') {
        params.tag = null
        params.hasPicture = false
      } else if (i.title === '有图') {
        params.tag = null
        params.hasPicture = true
      } else {
        params.tag = i.title
        params.hasPicture = false
      }
      // 每一次条件筛选都要回到第一页，并调用接口
      params.page=1
      getData()
    }
    // 排序点击事件
    function sortClick (str) {
      if(params.sortField===str){
        return
      }
      params.sortField = str
        // 每一次条件筛选都要回到第一页，并调用接口
      params.page=1
      getData()
    }
    // 获取商品列表
    const list=ref([])
    async function getData(){
      const res=await goodsEvaluatePage(params,route.params.id)
      //转换好再渲染
      res.result.items.forEach(item=>{
        item.member.nickname=formatName(item.member.nickname)
        item.orderInfo.specs=formatArr(item.orderInfo.specs)
      })
      counts.value=res.result.counts
      console.log('列表数据',res);
      list.value=res.result.items
    }
    //名字脱免
    function formatName(str){
      if(str.length<=2){
        return str[0]+'**'
      }else{
        return str[0]+'**'+str[str.length-1]
      }
    }
    //属性转换
    function formatArr(arr){
      let _temp=arr.map(item=>{
        return item.name+':'+item.nameValue
      })
      return _temp.join(' ')
    }
    //分页页码修改
    function pageChange(num){
      params.page=num
      getData()
    }
    getData()
    return { commentInfo, aClick, currTitle, sortClick, params,list,counts,pageChange}
  }
}
</script>
<style scoped lang="less">
.goods-comment {
  .head {
    display: flex;
    padding: 30px 0;
    .data {
      width: 340px;
      display: flex;
      padding: 20px;
      p {
        flex: 1;
        text-align: center;
        span {
          display: block;
          &:first-child {
            font-size: 32px;
            color: @priceColor;
          }
          &:last-child {
            color: #999;
          }
        }
      }
    }
    .tags {
      flex: 1;
      display: flex;
      border-left: 1px solid #f5f5f5;
      .dt {
        font-weight: bold;
        width: 100px;
        text-align: right;
        line-height: 42px;
      }
      .dd {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        > a {
          width: 132px;
          height: 42px;
          margin-left: 20px;
          margin-bottom: 20px;
          border-radius: 4px;
          border: 1px solid #e4e4e4;
          background: #f5f5f5;
          color: #999;
          text-align: center;
          line-height: 40px;
          &:hover {
            border-color: @xtxColor;
            background: lighten(@xtxColor, 50%);
            color: @xtxColor;
          }
          &.active {
            border-color: @xtxColor;
            background: @xtxColor;
            color: #fff;
          }
        }
      }
    }
  }
  .sort {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    margin: 0 20px;
    color: #666;
    > span {
      margin-left: 20px;
    }
    > a {
      margin-left: 30px;
      &.active,
      &:hover {
        color: @xtxColor;
      }
    }
  }
    .list {
    padding: 0 20px;
    .item {
      display: flex;
      padding: 25px 10px;
      border-bottom: 1px solid #f5f5f5;
      .user {
        width: 160px;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
        }
        span {
          padding-left: 10px;
          color: #666;
        }
      }
      .body {
        flex: 1;
        .score {
          line-height: 40px;
          .iconfont {
            color: #ff9240;
            padding-right: 3px;
          }
          .attr {
            padding-left: 10px;
            color: #666;
          }
        }
      }
      .text {
        color: #666;
        line-height: 24px;
      }
      .time {
        color: #999;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
      }
    }
  }
}
</style>
